<template>
  <div class="app-contain">
    <el-card>
      <div class="search">
        <el-button class="newBtn" size="small" icon="el-icon-plus" @click="$emit('addRole')">新增角色</el-button>
      </div>
      <el-table
        v-loading="loading"
        :data="tableList"
        border
        style="width: 100%"
      >
        <el-table-column label="序号" width="120" type="index" align="center" />
        <el-table-column label="人员名称" width="180" prop="userName" align="center" />
        <el-table-column label="角色" width="120" prop="roleName" align="center" />
        <el-table-column label="联系电话" prop="mobile" align="center" />

        <el-table-column label="完成本月工单（本月）" prop="workCount" align="center" />
        <el-table-column label="进行中工单" prop="progressTotal" align="center" />
        <el-table-column label="拒绝工单（本月）" prop="cancelCount" align="center" />
        <el-table-column label="操作" width="140">
          <template slot-scope="scope">

            <span style="color:blue;margin-right:10px" @click="watches(scope.row.userId)">查看详情</span>

          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="space-between" align="middle" class="block" style="margin-top:10px">
        <div class="page">
          <div class="page-total">
            <span>共{{ total }}条记录</span>
            <span>第{{ page.pageIndex }}/{{ totalPage }}页</span>
          </div>
        </div>
        <el-pagination
          v-if="total > 0"
          :current-page.sync="page.pageIndex"
          :page-size.sync="page.pageSize"
          background
          layout=" prev, next,slot"
          prev-text="上一页"
          next-text="下一页"
          :total="total"
          @current-change="getRoleList"
          @size-change="getRoleList"
        />
      </el-row>
      <el-dialog title="人员详情" :visible.sync="watch">
        <el-row type="flex" class="user-info" align="center">
          <el-col :span="9">人员名称：{{ user.userName }}</el-col>
          <el-col :span="7">角色：{{ user.roleName }}</el-col>
          <el-col :span="8">联系电话: {{ user.mobile }}</el-col>
          <div>负责区域：{{ user.regionName }}</div>
        </el-row>
        <el-row
          type="flex"
          justify="space-between"
          align="center"
          style="height:40px;background: #f7f8fd;border-top: 1px solid #d8dde3;
           border-left: 1px solid #d8dde3;"
        >
          <el-col class="item" :span="4">{{ blank }}</el-col>
          <el-col class="item" :span="5">总工单数</el-col>
          <el-col class="item" :span="5">拒绝工单</el-col>
          <el-col class="item" :span="5">完成工单</el-col>
          <el-col class="item" :span="5">进行中工单</el-col>
        </el-row>
        <el-row
          type="flex"
          align="center"
          style="height:40px;border-top: 1px solid #d8dde3;
           border-left: 1px solid #d8dde3;"
        >
          <el-col class="item" :span="4">本周</el-col>
          <el-col class="item" :span="5">{{ week.total }}</el-col>
          <el-col class="item" :span="5">{{ week.cancelCount }}</el-col>
          <el-col class="item" :span="5">{{ week.workCount }}</el-col>
          <el-col class="item" :span="5">{{ week.progressTotal }}</el-col>
        </el-row>
        <el-row
          type="flex"
          align="center"
          style="height:40px;border-top: 1px solid #d8dde3;
           border-left: 1px solid #d8dde3;"
        >
          <el-col class="item" :span="4">本月</el-col>
          <el-col class="item" :span="5">{{ month.total }}</el-col>
          <el-col class="item" :span="5">{{ month.cancelCount }}</el-col>
          <el-col class="item" :span="5">{{ month.workCount }}</el-col>
          <el-col class="item" :span="5">{{ month.progressTotal }}</el-col>
        </el-row>
        <el-row
          type="flex"
          align="center"
          style="height:40px;border-top: 1px solid #d8dde3;
           border-left: 1px solid #d8dde3;
           border-bottom: 1px solid #d8dde3;"
        >
          <el-col class="item" :span="4">本年</el-col>
          <el-col class="item" :span="5">{{ year.total }}</el-col>
          <el-col class="item" :span="5">{{ year.cancelCount }}</el-col>
          <el-col class="item" :span="5">{{ year.workCount }}</el-col>
          <el-col class="item" :span="5">{{ year.progressTotal }}</el-col>
        </el-row>
      </el-dialog>
    </el-card>
  </div>

</template>

<script>
import { getUserWorkApi, getUserInfoApi } from '@/api/user'
import dayjs from 'dayjs'

export default {
  name: 'UserTable',
  props: {
    page: {
      type: Object,
      default: () => ({})
    },
    tableList: {
      type: Array,
      required: true
    },
    total: {
      type: [String, Number],
      default: 0
    },
    totalPage: {
      type: [String, Number],
      default: 0
    }
  },
  data() {
    return {
      blank: '',
      loading: false,
      dialogFormVisible: false,
      watch: false,
      currentPageRecords: '',
      user: {},
      week: {},
      month: {},
      year: {}
    }
  },

  methods: {

    // 当页页数发生变化 触发
    getRoleList() {
      this.$emit('getRoleList')
    },
    // 查看详情
    async watches(id) {
      const { data } = await getUserInfoApi(id)
      console.log(data)
      this.user = data
      // this.$emit('watch', id)
      //   this.dialogFormVisible = true
      // 当前本月当天时间
      const currentDateStart1 = dayjs().format('YYYY-MM-DD')
      const wekEnd = `${currentDateStart1} 00:00:00`
      // 当前本月当前的前一天时间
      const pre = dayjs().subtract('1', 'days').format('YYYY-MM-DD')
      const predate = `${pre} 00:00:00`
      console.log(predate)
      const dataWek = await getUserWorkApi({ userId: id, start: predate, end: wekEnd })
      this.week = dataWek.data

      // 当前月月初
      const wektart = new Date().setDate(1)
      const currentwek = dayjs(wektart).format('YYYY-MM-DD')
      const monthStart = `${currentwek} 00:00:00`
      const datamonth = await getUserWorkApi({ userId: id, start: monthStart, end: wekEnd })
      this.month = datamonth.data

      // 当年 1月1日
      const dataYear = dayjs().startOf('year').format('YYYY-MM-DD HH:mm:ss')
      console.log(dataYear)
      const datayear = await getUserWorkApi({ userId: id, start: dataYear, end: wekEnd })
      this.year = datayear.data
      // 当所有数据请求好后打开
      this.watch = true
    },
    // 搜索
    searchUser(value) {
      this.userList = value
    }

  }
}
</script>

<style lang="scss">
.page {
  display: flex;
  justify-content: space-between;
  .page-total {
    span {
      color: #dbdfe5!important;
      font-size: 16px;
      margin-right: 10px;
      font-weight: normal;
    }
  }
}
.search {
margin-bottom: 15px ;
  .newBtn {
    background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
    color: #fff;
  }
}
.el-pagination {
  display: flex;
  .btn-prev,.btn-next {
    width: 70px;
    height: 32px;
    margin: 0 16px;
    border-radius: 2px;
    background-color: #d5ddf8;
  }
}
.user-info {
        height: 86px;
        margin-bottom: 26px;
    padding: 19px 19px 0;
    background: #f3f6fb;
    flex-wrap: wrap;
}
.item {
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-right: 1px solid #d8dde3;
}
</style>
